<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getPhydateil } from '@/apis/apis.js'
import SeMember from '@/components/SeMember.vue'
import { useMemberStore } from '@/store/index.js'
const memberStore = useMemberStore()
const id = ref('')
const data = ref([])
const activeIndex = ref(-1)
const seMemberRef = ref(null)
const handleChoose = () => {
  memberStore.updateShow(true)
}
const handleChangeDate = (item, index) => {
  activeIndex.value = index
  memberStore.updatePhyTime(item.date)
}
onLoad((option) => {
  id.value = option.id
})
onMounted(async () => {
  const res = await getPhydateil({
    id: id.value
  })
  console.log(res)
  data.value = res.data
  memberStore.updatePhyName(res.data[0].title)
})
</script>

<template>
  <view class="view" v-for="(item, index) in data" :key="index">
    <view class="view-header">
      <image class="view-header-image" :src="item.image" mode="aspectFill"></image>
      <view class="view-header-price-number">
        <view class="view-header-price">￥ {{ item.price }}</view>
        <view class="view-header-number">已约 {{ item.sales }}</view>
      </view>
      <view class="view-header-title">{{ item.title }}</view>
    </view>
    <view class="view-time">
      <view class="view-time-title">体检时间选择</view>
      <scroll-view class="view-time-container" scroll-x enable-flex>
        <view class="view-time-item" :class="{ active: activeIndex === dateIndex }" v-for="(date, dateIndex) in item.date" :key="dateIndex" @click="handleChangeDate(date, dateIndex)">
          <view class="view-time-item-date">{{ date.date }}</view>
          <view class="view-time-item-week">{{ date.week }}</view>
        </view>
      </scroll-view>
    </view>
    <view class="view-type">
      <view class="view-type-title">适用人群</view>
      <scroll-view class="view-type-container" scroll-x enable-flex>
        <view class="view-type-item" v-for="(crowd, crowdIndex) in item.crowd" :key="crowdIndex">
          <image class="view-type-item-image" :src="crowd.image" mode="aspectFill"></image>
          <view class="view-type-item-text">{{ crowd.name }}</view>
        </view>
      </scroll-view>
    </view>
    <view class="view-projects">
      <view class="view-projects-title">套餐项目</view>
      <view class="view-project" v-for="(project, projectIndex) in item.project" :key="projectIndex">
        <view class="view-project-title">{{ project.title }}</view>
        <view class="view-project-content">
          <view class="view-project-content-item" v-for="(content, contentIndex) in project.content" :key="contentIndex">
            <view class="view-project-content-item-left">{{ content.thing }}</view>
            <view class="view-project-content-item-right">{{ content.details }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="view-footer">
      <view class="view-footer-price">检测费用：￥{{ item.price }}</view>
      <view class="view-footer-button" @click="handleChoose">选择成员</view>
    </view>
  </view>
  <SeMember ref="seMemberRef"></SeMember>
</template>

<style scoped lang="scss">
.view {
  position: relative;
  padding-bottom: 300rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
  .view-header {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .view-header-image {
      width: 750rpx;
      height: 450rpx;
    }
    .view-header-price-number {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      .view-header-price {
        color: red;
      }
    }
    .view-header-title {
      padding: 0 20rpx 20rpx;
      font-weight: bold;
      font-size: 36rpx;
    }
  }
  .view-time {
    margin: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    .view-time-title {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .view-time-container {
      display: flex;
      white-space: nowrap;
      .view-time-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        padding: 0 20rpx;
        border-radius: 10rpx;
        &.active {
          background-color: #4276e6;
          color: #fff;
        }
      }
    }
  }
  .view-type {
    margin: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    .view-type-title {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .view-type-container {
      display: flex;
      justify-content: space-between;
      white-space: nowrap;
      .view-type-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        .view-type-item-image {
          margin-bottom: 10rpx;
          width: 100rpx;
          height: 100rpx;
          border-radius: 10rpx;
        }
      }
    }
  }
  .view-projects {
    margin: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    .view-projects-title {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .view-project {
      .view-project-title {
        margin-bottom: 20rpx;
        padding: 20rpx 0;
        background-color: #f0f4f8;
        border-radius: 10rpx;
        text-align: center;
        font-weight: bold;
      }
      .view-project-content {
        .view-project-content-item {
          display: flex;
          margin-bottom: 10rpx;
          .view-project-content-item-left {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            margin-right: 10rpx;
            background-color: #f0f4f8;
            border-radius: 10rpx;
            font-size: 28rpx;
          }
          .view-project-content-item-right {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 2;
            padding: 20rpx 10rpx;
            background-color: #f0f4f8;
            border-radius: 10rpx;
            font-size: 28rpx;
          }
        }
      }
    }
  }
  .view-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    padding-bottom: env(safe-area-inset-bottom);
    width: 750rpx;
    background-color: #fff;
    .view-footer-price {
      color: red;
    }
    .view-footer-button {
      padding: 15rpx 40rpx;
      background-color: #4276e6;
      border-radius: 10rpx;
      color: #fff;
    }
  }
}
</style>
